import PermissionBtn from "@/components/PermissionBtn";
import { Button, Space, Table, TableProps, Avatar, Tag, Modal } from "antd";
import { Link } from "../../../../types/content/link";
import { ExclamationCircleFilled, PlusOutlined } from "@ant-design/icons";
import { useLinkTable } from "../hooks/useLinkTable";
import { useLinkOption } from "../hooks/useLinkOption";
import OptionForm from "./OptionForm";

export default function LinkTable() {
  const { loading, tableData, getLinkList, removeLink } = useLinkTable();
  const { isModalOpen, optionType, oldInfo, close, openOptionDialog } =
    useLinkOption();
  const showConfirm = (row: Link.Row) => {
    Modal.confirm({
      title: "警告",
      icon: <ExclamationCircleFilled />,
      content: `确认删除${row.name}?`,
      okText: "确认",
      cancelText: "取消",
      okType: "danger",
      onOk() {
        console.log("OK");
        removeLink(row.id);
      },
    });
  };
  const columns: TableProps<Link.Row>["columns"] = [
    {
      title: "名称",
      key: "name",
      dataIndex: "name",
      ellipsis: true,
      width: 130,
      align: "center",
      fixed: "left",
    },
    {
      title: "logo",
      dataIndex: "logo",
      key: "logo",
      width: 60,
      align: "center",
      render: (_, { logo }) => (
        <>
          {logo && <Avatar size={50} src={<img src={logo} alt="avatar" />} />}
        </>
      ),
    },

    {
      title: "主页地址",
      dataIndex: "address",
      key: "address",
      width: 140,
      align: "center",
      render: (_, { address }) => (
        <>
          {address && (
            <a href={address} target="_blank">
              {address}
            </a>
          )}
        </>
      ),
    },

    {
      title: "描述",
      key: "description",
      dataIndex: "description",
      ellipsis: true,
      width: 180,
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 100,
      align: "center",
      render: (_, { status }) => (
        <>
          {status === "0" && <Tag color="success">审核已通过</Tag>}
          {status === "1" && <Tag color="error">审核未通过</Tag>}
          {status === "2" && <Tag color="processing">未审核</Tag>}
        </>
      ),
    },
    {
      title: "更新时间",
      key: "updateTime",
      dataIndex: "updateTime",
      ellipsis: true,
      width: 130,
      align: "center",
    },
    {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 110,
      align: "center",
      render: (_, row) => (
        <Space size={2} wrap>
          <PermissionBtn code="link.edit">
            <Button
              type="link"
              onClick={() => {
                openOptionDialog("edit", row);
              }}
            >
              编辑
            </Button>
          </PermissionBtn>
          <PermissionBtn code="link.remove">
            <Button
              type="link"
              danger
              onClick={() => {
                showConfirm(row);
              }}
            >
              删除
            </Button>
          </PermissionBtn>
        </Space>
      ),
    },
  ];
  return (
    <div className="page__wrap--g" style={{ padding: 0 }}>
      <div className="form__wrap--g" style={{ justifyContent: "flex-end" }}>
        <PermissionBtn code="link.add">
          <Button
            type="primary"
            icon={<PlusOutlined />}
            size="middle"
            onClick={() => {
              openOptionDialog("add");
            }}
          >
            添加友情链接
          </Button>
        </PermissionBtn>
      </div>
      <div className="table__wrap--g no-page">
        <Table
          loading={loading}
          columns={columns}
          dataSource={tableData}
          rowKey="id"
          sticky
          bordered
          size="small"
          scroll={{ x: 1300 }}
          pagination={false}
        />
      </div>
      {isModalOpen && (
        <OptionForm
          isModalOpen={isModalOpen}
          optionType={optionType}
          oldInfo={oldInfo}
          close={close}
          change={() => {
            getLinkList();
          }}
        />
      )}
    </div>
  );
}
